<template>
  <div id="appraise">
    <div class="top">
      <div class="pic">
        <img src="../../assets/images/logo.png">
      </div>
      <div class="text">
        <p>亲,可盼到您了!</p>
        <p>李宁的成长需要您的鼓励和监督!</p>
        <p>请协助我们找到工作中的问题吧!</p>
      </div>
    </div>
    <div class="suggest">
      <div class="star">
        <p>请对店铺卫生情况进行评价:</p>
        <span v-for="(itemClass,index1) in itemClasses1" :class="itemClass" class="star-item" :track-index="index1" @click="clickIndex1(index1)"></span>
      </div>
      <div class="star">
        <p>请对导购的产品特点介绍服务进行评价:</p>
        <span v-for="(itemClass,index2) in itemClasses2" :class="itemClass" class="star-item" :track-index="index2" @click="clickIndex2(index2)"></span>
      </div>
      <div class="star last">
        <p>请对产品穿用的舒适度进行评价:</p>
        <span v-for="(itemClass,index3) in itemClasses3" :class="itemClass" class="star-item" :track-index="index3" @click="clickIndex3(index3)"></span>
      </div>
      <p>以后您是否愿意再来光顾本店？</p>
      <div class="checkLi">
        <check-icon :value.sync="checkone" @click.native="setother('1')">是</check-icon>
        <check-icon :value.sync="checktwo" @click.native="setother('2')">否</check-icon>
      </div>
      <p>以后您是否愿意继续购买李宁品牌的产品？</p>
      <div class="checkLi">
        <check-icon :value.sync="checkthree" @click.native="setother('3')">是</check-icon>
        <check-icon :value.sync="checkfour" @click.native="setother('4')">否</check-icon>
      </div>
      <p>您还有什么要对我们说的?</p>
      <x-textarea :max="200" name="detail" placeholder="请输入想对我们说的话" v-model="message" :show-counter="false"></x-textarea>
    </div>
    <box gap="30px 30px">
      <x-button text="提交评价" :disabled="processButton" @click.native="submit" type="primary"></x-button>
    </box>
    <App-Mask1 :mask="mask"></App-Mask1>
    <alert v-model="showAlert" :content="alertText" @on-hide="onAlertHide"></alert>
    <loading :show="loadtoast" :text="'加载中...'"></loading>
  </div>
</template>
<script>
  import AppMask1 from '../../components/mask1/Mask1'
  import { Alert, XTextarea, XButton, Box, Loading, CheckIcon } from 'vux'
  export default {
    name: 'appraise',
    components: {
      XTextarea,
      XButton,
      Box,
      AppMask1,
      Loading,
      Alert,
      CheckIcon
    },
    data () {
      return {
        score1: '',
        score2: '',
        score3: '',
        disable001: true,
        message: '',
        mask: {
          type: 2,
          'isShow1': false,
          'isShow2': false
        },
        loadtoast: false,
        showAlert: false,
        alertText: '',
        checkone: false,
        checktwo: false,
        checkthree: false,
        checkfour: false
      }
    },
    created () {
      this.$axios.post(this.apidomain + '/api/cust/getCustInfo/' + this.getCookie('appid'), {
        wxOpenId: this.getCookie('openid')
      })
      .then((response) => {
        if (response.data.data === null || response.data.data.member_id === undefined) {
          if (confirm('亲爱的用户，您还没有领取会员卡哦！')) {
            this.routeto('wechatticket', {
              oid: this.$route.query.oid || '',
              mid: this.$route.query.mid || '',
              brandid: this.$route.query.brandid || '1',
              sid: this.$route.query.sid || ''
            })
            sessionStorage.setItem('praisePath', 'appraise')
          } else {
            window.WeixinJSBridge.invoke('closeWindow')
          }
        } else {
          if (response.data.data.vip === '0') {
            this.routeto('usersetting', {
              oid: this.$route.query.oid || '',
              mid: this.$route.query.mid || '',
              brandid: this.$route.query.brandid || '1',
              sid: this.$route.query.sid || ''
            })
            sessionStorage.setItem('praisePath', 'appraise')
          }
        }
      })
      .catch((error) => {
        console.log(error)
        window.alert('会员信息查询失败')
      })
    },
    computed: {
      itemClasses1 () {
        let result = []
        let score1 = Math.floor(this.score1 * 2) / 2
        let integer = Math.floor(score1)
        for (let i = 0; i < integer; i++) {
          result.push('on')
        }
        while (result.length < 5) {
          result.push('off')
        }
        return result
      },
      itemClasses2 () {
        let result = []
        let score2 = Math.floor(this.score2 * 2) / 2
        let integer = Math.floor(score2)
        for (let i = 0; i < integer; i++) {
          result.push('on')
        }
        while (result.length < 5) {
          result.push('off')
        }
        return result
      },
      itemClasses3 () {
        let result = []
        let score3 = Math.floor(this.score3 * 2) / 2
        let integer = Math.floor(score3)
        for (let i = 0; i < integer; i++) {
          result.push('on')
        }
        while (result.length < 5) {
          result.push('off')
        }
        return result
      },
      processButton () {
        this.disable001 = true
        if (this.score1 > 0 && this.score2 > 0 && this.score3 > 0 && (this.checktwo !== false || this.checkone !== false) && (this.checkthree !== false || this.checkfour !== false)) {
          this.disable001 = false
          return this.disable001
        }
        return this.disable001
      }
    },
    methods: {
      clickIndex1 (index1) {
        this.score1 = index1 + 1
      },
      clickIndex2 (index2) {
        this.score2 = index2 + 1
      },
      clickIndex3 (index3) {
        this.score3 = index3 + 1
      },
      submit () {
        sessionStorage.setItem('praisePath', '')
        if (this.score1 > 0 && this.score2 > 0 && this.score3 > 0 && (this.checktwo !== false || this.checkone !== false) && (this.checkthree !== false || this.checkfour !== false)) {
          this.loadtoast = true
          this.$axios.post(this.apidomain + '/api/order/saveOrederEvaluate/' + this.getCookie('appid'), {
            openId: this.getCookie('openid'),
            orderNo: this.$route.query.oid || '',
            storeHealth: this.score1,
            prodCharacter: this.score2,
            prodComfort: this.score3,
            message: this.message,
            mid: this.$route.query.mid || '',
            brandId: this.$route.query.brandid || '1',
            storeCode: this.$route.query.sid || '',
            isBuyproduct: this.checkone === true ? '1' : '0',
            isComeback: this.checkthree === true ? '1' : '0'
          })
          .then((response) => {
            this.loadtoast = false
            if (response.data.errorCode === '0') {
              if (response.data.data.type === 'coupon') {
                this.$set(this.mask, 'data', response.data.data)
                this.$set(this.mask, 'isShow1', true)
              }
              if (response.data.data.type === 'point') {
                this.$set(this.mask, 'data', response.data.data)
                this.$set(this.mask, 'isShow2', true)
              }
            } else {
              this.showAlert = true
              this.alertText = response.data.errorMsg
              // this.routeto('home')
            }
          })
          .catch((error) => {
            console.log(error)
            this.loadtoast = false
            // console.log(this.message)
          })
          // this.mask.isShow2 = true
          // this.$router.push({'path': '/membercenter'})
        }
      },
      onAlertHide: function () {
        this.routeto('home')
      },
      setother: function (l) {
        if (l === '3') {
          this.checkfour = false
          this.checkthree = true
        } else if (l === '4') {
          this.checkfour = true
          this.checkthree = false
        } else if (l === '1') {
          this.checkone = true
          this.checktwo = false
        } else {
          this.checktwo = true
          this.checkone = false
        }
      }
    },
    mounted () {
      if (/Android [4-8]/.test(navigator.appVersion)) {
        window.addEventListener('resize', function () {
          if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
            window.setTimeout(function () {
              document.activeElement.scrollIntoViewIfNeeded()
            }, 0)
          }
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/appraise/appraise.less";
</style>
